---
import ImageCard from './ImageCard.astro';
import { getCollection } from "astro:content";

const images = await getCollection("images");

const sortedImages = images.sort(
      (a, b) =>
        Math.floor(new Date(b.data.date).getTime() / 1000) -
        Math.floor(new Date(a.data.date).getTime() / 1000)
    );

---

<div class="container mx-auto px-4 pt-8 mb-8">
	<div>
		<h2 class="tracking-wider text-orange-500 text-lg font-semibold">All Images</h2>
		<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 lg:grid-cols-4 gap-8">
      {
        sortedImages.length > 0 ? sortedImages.map((item) => <ImageCard item={item.data} />) : <p>No images found</p>
      }
		</div>
	</div>
</div>
